<template>
  <div class="abb-page">
    <div>
      <img
        src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
      />
    </div>
    <div class="fz48">
      <p>
        <span class="henxinase"></span>
      </p>
    </div>

    <div class="text-context" :style="{ height: xqHeight }">
      <div class="fz32 z9 cen pt40 jjhjsewerrw" @click="isshowxq = true">
        点击编辑详情！
      </div>
      <template v-for="(item, idx) in xqDataList" :key="idx">
        <span
          v-if="item.typeid == 0"
          :style="fontStle(item)"
          class="conhgbeertww"
          >{{ item.val }}</span
        >
        <textarea
          v-if="item.typeid == 1"
          :value="item.val"
          class="conhgbeertww"
          :style="fontStle(item)"
        ></textarea>
        <div
          class="conhgbeertww"
          v-if="item.typeid == 2"
          :style="ImgStle(item)"
        >
          <img :src="item.imgUrl" :style="ImgStle(item)" v-if="item.imgUrl" />
          <div
            v-else
            class="w100 h100 fz22 ov z9 vertical-center editor-img-Box"
          >
            {{ item.w }}*{{ item.h }}
          </div>
        </div>
        <div
          v-if="item.typeid == 3"
          class="conhgbeertww"
          :style="ImgStle(item)"
        >
          <n-carousel v-if="item.imgUrlList">
            <img
              class="w100 h100"
              :src="imger"
              v-for="(imger, id) in item.imgUrlList"
              :style="Imgbanner(item)"
            />
          </n-carousel>
          <div
            v-else
            class="w100 h100 fz22 ov z9 vertical-center editor-img-Box"
          >
            {{ item.w }}*{{ item.h }}
          </div>
        </div>
      </template>
    </div>

    <p class="fz12 z9 mt20">(以下效果在前端不展示)</p>
    <div class="mt20">
      <p class="z3 fz16">封面</p>
      <div
        class="fengmianbox vertical-center sz"
        @click="photoShowModalsan = true"
      >
        <img :src="form.fm" class="w100 h100 imgjz" v-if="form.fm" />
        <i class="iconfont dx-24gl-pictures fz40 z9" v-else></i>
      </div>
    </div>
    <div class="mt20">
      <n-input
        v-model:value="form.title"
        type="text"
        placeholder="标题"
        size="medium"
        clearable
      ></n-input>
    </div>
    <div class="mt20">
      <n-input
        v-model:value="form.subheading"
        type="textarea"
        placeholder="简介"
        size="medium"
        clearable
      ></n-input>
    </div>
    <div class="mt20 display-flex">
      <n-radio-group name="radiogroup">
        <n-space>
          <n-checkbox v-model:checked="form.sstj">
            <span class="fz24">设为首页案例展示</span></n-checkbox
          >
        </n-space>
      </n-radio-group>
    </div>

    <div class="mt20">
      <n-button type="primary" size="medium" @click="addCase" :loading="loading"
        >发布案例</n-button
      >
      <n-button size="medium" class="ml20" @click="Back">返回上一页</n-button>
    </div>

    <n-modal
      v-model:show="photoShowModalsan"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传封面</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImgsan"
          types="abb客户案例封面"
        ></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModalsan = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturlsan">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
    <editor
      v-if="isshowxq"
      @close="isshowxq = false"
      @successFun="getxqData"
      :initData="xqDataList"
    ></editor>
  </div>
</template>
 <script lang='ts' setup>
import { ref } from "vue";
import photoGallery from "../../../components/util/photoGallery";
import editor from "../../public/editor.vue";
import {
  fontStle,
  ImgStle,
  callBack,
  Imgbanner,
  dxpost,
  qurl,
  dxget,
} from "../../../util/index";
const cz = qurl();
const loading = ref(false);
const photoShowModaler = ref(false);
const photoShowModalsan = ref(false);
const isbj = ref(false); // 是否为编辑的状态
const isshowxq = ref(false); //是否显示详情
const xqDataList = ref(); // 详情的数据
const xqHeight = ref(); // 详情的高度
const Back = callBack;
const form = ref({
  title: "",
  toutu: "",
  subheading: "",
  details: "",
  sstj: true,
  fm: "",
});
let videUrlsan = "";
// 获取详情数据
const getxqData = (data) => {
  xqDataList.value = data;
  isshowxq.value = false;
  getArrMax();
  form.value.details = JSON.stringify(data);
};

//获取数组中最大的值  方便计算详情的高度
const getArrMax = () => {
  const dsxe = [];
  xqDataList.value.map((a) => {
    dsxe.push(a.y);
  });
  let getMaxy = dsxe.reduce((a, b) => (a > b ? a : b)); //获取最大 的y坐标
  getMaxy += xqDataList.value.filter((a) => a.y == getMaxy)[0].h;
  xqHeight.value = getMaxy + 20 + "px";
};

const getImgsan = (data) => {
  videUrlsan = data;
};
const geturlsan = () => {
  photoShowModalsan.value = false;
  form.value.fm = videUrlsan;
};

// 添加案例
const addCase = async () => {
  loading.value = true;
  const res = await dxpost(
    "abb/abbsolution",
    form.value,
    isbj.value ? "PUT" : "POST"
  );
  console.log(res);
  loading.value = false;
  window.$message.success("添加成功");
  Back();
};

const initData = async () => {
  let { data }: any = await dxget("abb/abbsolution", cz);
  form.value = data;
  xqDataList.value = JSON.parse(data.details);
  form.value.sstj = data.sstj == 1 ? true : false;
  getArrMax();
};
if (cz.id) {
  initData();
  isbj.value = true;
}
</script>
 <style scoped>
.text-context {
  min-height: 800px;
}
</style>